<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Tabs 标签页 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col">
            <div class="alert alert-light alert-elevate fade show" role="alert">
                <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
                <div class="alert-text">
                    基于<code>Bootstrap Tabs</code>，可前往
                    <a class="e-link e-font-bold" href="https://getbootstrap.com/docs/4.3/components/navs/#tabs" target="_blank">查看详细API</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            基础
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#" data-target="#e-tabs-1-1-1">文案</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                               aria-haspopup="true" aria-expanded="false">语言</a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" data-toggle="tab" href="#e-tabs-1-2-1">明确表述立足点</a>
                                <a class="dropdown-item" data-toggle="tab" href="#e-tabs-1-2-2">精简语句</a>
                                <a class="dropdown-item" data-toggle="tab" href="#e-tabs-1-2-3">使用用户熟悉的语言</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" data-toggle="tab" href="#e-tabs-1-2-4">表述一致</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#e-tabs-1-3-1">重要的信息放在显著位置</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" data-toggle="tab" href="#e-tabs-1-4-1">Disabled 禁用</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="e-tabs-1-1-1" role="tabpanel">
                            <p>在界面中，我们需要通过对话的方式与用户产生共鸣。
                                精准、清晰的语言会更容易让用户理解，合适的语气更容易让用户建立信任感。因此在界面设计时，文案也应当被重视。
                                在使用和书写文案时有以下几点需要注意：</p>
                            <ul>
                                <li>从用户角度出发</li>
                                <li>表述一致</li>
                                <li>重要的信息放在显著位置</li>
                                <li>专业、精准、完整</li>
                                <li>精简、友好、正面</li>
                            </ul>
                        </div>
                        <div class="tab-pane" id="e-tabs-1-2-1" role="tabpanel">
                            <p>在界面中，文案是我们与用户沟通的基础，语言文字的表述也需要精心推敲，仔细设计。清晰、准确、简洁的文案设计能够让界面拥有更好的可用性，同时让用户体验更加友好。</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-1-2-2" role="tabpanel">
                            <p>在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述的立足点很重要。</p>
                            <p>既然以用户为中心，文案就应该尽量以用户为主体来写作。</p>
                            <p>注：当用户向后台反馈问题、提出建议或申诉时，使用『我们』是合理的语境，例如『我们将会审核你的申诉』。</p>
                            <p class="e-font-success">正确示范：浏览不同的仓库，了解更多有价值的内容</p>
                            <p class="e-font-danger">错误示范：为了让你了解更多有价值的内容，我们提供了不同仓库供你浏览。（侧重在『我们』为用户提供了什么，而不是以用户视角的关注点为中心。）</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-1-2-3" role="tabpanel">
                            <p>省略无用词汇，不重复用户已知事实；在绝大多数交互场景下，都无需界面描述出全部的细节。</p>
                            <p>尽量提供简短、易于快速获取的内容。</p>
                            <p class="e-font-success">正确示范：保存</p>
                            <p class="e-font-danger">错误示范：保存修改内容</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-1-2-4" role="tabpanel">
                            <p>使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。</p>
                            <p>间接、暧昧模糊的说法，生僻和过于『文雅』的用词，会增加用户的认知负荷，所以应当尽量避免使用这类用户无法识别的词汇。</p>
                            <p class="e-font-success">正确示范：付款成功</p>
                            <p class="e-font-danger">错误示范：资金流出成功</p>

                        </div>
                        <div class="tab-pane" id="e-tabs-1-3-1" role="tabpanel">
                            <ul>
                                <li>描述同一个事物的词汇要保持统一;</li>
                                <li>上下文的语法、语种、语序要保持统一;</li>
                                <li>操作的名称和目标页面标题的名称保持一致。</li>
                            </ul>
                        </div>
                        <div class="tab-pane" id="e-tabs-1-4-1" role="tabpanel">
                            <p>让用户第一眼看到最重要的内容，不用到段落中寻找。</p>
                            <p>注：如考虑安全性问题时，隐私信息也可调整为『点击后可见』的方式。</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            图标 + 文字
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <p>你可以在<code>a.dropdown-item</code>内添加<code>i</code>图标</p>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#" data-target="#e-tabs-2-1-1">
                                <i class="la la-anchor"></i> 文案
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                               aria-haspopup="true" aria-expanded="false"><i class="la la-language"></i> 语言</a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" data-toggle="tab" href="#e-tabs-2-2-1">明确表述立足点</a>
                                <a class="dropdown-item" data-toggle="tab" href="#e-tabs-2-2-2">精简语句</a>
                                <a class="dropdown-item" data-toggle="tab" href="#e-tabs-2-2-3">使用用户熟悉的语言</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" data-toggle="tab" href="#e-tabs-2-2-4">表述一致</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#e-tabs-2-3-1"><i class="la la-adjust"></i> 重要的信息放在显著位置</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" data-toggle="tab" href="#e-tabs-2-4-1"><i class="la la-cc-discover"></i> Disabled 禁用</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="e-tabs-2-1-1" role="tabpanel">
                            <p>在界面中，我们需要通过对话的方式与用户产生共鸣。
                                精准、清晰的语言会更容易让用户理解，合适的语气更容易让用户建立信任感。因此在界面设计时，文案也应当被重视。
                                在使用和书写文案时有以下几点需要注意：</p>
                            <ul>
                                <li>从用户角度出发</li>
                                <li>表述一致</li>
                                <li>重要的信息放在显著位置</li>
                                <li>专业、精准、完整</li>
                                <li>精简、友好、正面</li>
                            </ul>
                        </div>
                        <div class="tab-pane" id="e-tabs-2-2-1" role="tabpanel">
                            <p>在界面中，文案是我们与用户沟通的基础，语言文字的表述也需要精心推敲，仔细设计。清晰、准确、简洁的文案设计能够让界面拥有更好的可用性，同时让用户体验更加友好。</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-2-2-2" role="tabpanel">
                            <p>在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述的立足点很重要。</p>
                            <p>既然以用户为中心，文案就应该尽量以用户为主体来写作。</p>
                            <p>注：当用户向后台反馈问题、提出建议或申诉时，使用『我们』是合理的语境，例如『我们将会审核你的申诉』。</p>
                            <p class="e-font-success">正确示范：浏览不同的仓库，了解更多有价值的内容</p>
                            <p class="e-font-danger">错误示范：为了让你了解更多有价值的内容，我们提供了不同仓库供你浏览。（侧重在『我们』为用户提供了什么，而不是以用户视角的关注点为中心。）</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-2-2-3" role="tabpanel">
                            <p>省略无用词汇，不重复用户已知事实；在绝大多数交互场景下，都无需界面描述出全部的细节。</p>
                            <p>尽量提供简短、易于快速获取的内容。</p>
                            <p class="e-font-success">正确示范：保存</p>
                            <p class="e-font-danger">错误示范：保存修改内容</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-2-2-4" role="tabpanel">
                            <p>使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。</p>
                            <p>间接、暧昧模糊的说法，生僻和过于『文雅』的用词，会增加用户的认知负荷，所以应当尽量避免使用这类用户无法识别的词汇。</p>
                            <p class="e-font-success">正确示范：付款成功</p>
                            <p class="e-font-danger">错误示范：资金流出成功</p>

                        </div>
                        <div class="tab-pane" id="e-tabs-2-3-1" role="tabpanel">
                            <ul>
                                <li>描述同一个事物的词汇要保持统一;</li>
                                <li>上下文的语法、语种、语序要保持统一;</li>
                                <li>操作的名称和目标页面标题的名称保持一致。</li>
                            </ul>
                        </div>
                        <div class="tab-pane" id="e-tabs-2-4-1" role="tabpanel">
                            <p>让用户第一眼看到最重要的内容，不用到段落中寻找。</p>
                            <p>注：如考虑安全性问题时，隐私信息也可调整为『点击后可见』的方式。</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            自适应标签页
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <p>你可以在<code>ul.nav</code>上添加<code>.nav-fill</code>设置导航区域宽度100%并平均划分每个标签宽度</p>
                    <ul class="nav nav-tabs nav-fill" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#e-tabs-3-1">标签一</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#e-tabs-3-2">标签二</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#e-tabs-3-3">标签三</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" data-toggle="tab" href="#e-tabs-3-4">标签四</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="e-tabs-3-1" role="tabpanel">
                            <p>Ant Design 将色彩体系解读成两个层面：系统级色彩体系和产品级色彩体系。</p>
                            <p>系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。
                                产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-3-2" role="tabpanel">
                            <p>Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计，该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，
                                同时也方便团队间的沟通。</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-3-3" role="tabpanel">
                            <p>Ant Design 系统级色彩体系同样源于『自然』的设计价值观。设计师通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，
                                形成了特有的 12 色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对 12 个颜色进行了衍生。
                                在中性色板的定义上，则是平衡了可读性、美感以及可用性得出的。</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-3-4" role="tabpanel">
                            <p>Ant Design 的基础色板共计 120 个颜色，包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Card-->
        </div>
        <div class="col-lg-6">

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            圆角按钮
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <p>你可以在<code>ul.nav</code>上添加<code>.nav-pills</code>设置使用圆角按钮作为标签页</p>
                    <ul class="nav nav-pills" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#" data-target="#e-tabs-4-1-1">文案</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                               aria-haspopup="true" aria-expanded="false">语言</a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" data-toggle="tab" href="#e-tabs-4-2-1">明确表述立足点</a>
                                <a class="dropdown-item" data-toggle="tab" href="#e-tabs-4-2-2">精简语句</a>
                                <a class="dropdown-item" data-toggle="tab" href="#e-tabs-4-2-3">使用用户熟悉的语言</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" data-toggle="tab" href="#e-tabs-4-2-4">表述一致</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#e-tabs-4-3-1">重要的信息放在显著位置</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" data-toggle="tab" href="#e-tabs-4-4-1">Disabled 禁用</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="e-tabs-4-1-1" role="tabpanel">
                            <p>在界面中，我们需要通过对话的方式与用户产生共鸣。
                                精准、清晰的语言会更容易让用户理解，合适的语气更容易让用户建立信任感。因此在界面设计时，文案也应当被重视。
                                在使用和书写文案时有以下几点需要注意：</p>
                            <ul>
                                <li>从用户角度出发</li>
                                <li>表述一致</li>
                                <li>重要的信息放在显著位置</li>
                                <li>专业、精准、完整</li>
                                <li>精简、友好、正面</li>
                            </ul>
                        </div>
                        <div class="tab-pane" id="e-tabs-4-2-1" role="tabpanel">
                            <p>在界面中，文案是我们与用户沟通的基础，语言文字的表述也需要精心推敲，仔细设计。清晰、准确、简洁的文案设计能够让界面拥有更好的可用性，同时让用户体验更加友好。</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-4-2-2" role="tabpanel">
                            <p>在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述的立足点很重要。</p>
                            <p>既然以用户为中心，文案就应该尽量以用户为主体来写作。</p>
                            <p>注：当用户向后台反馈问题、提出建议或申诉时，使用『我们』是合理的语境，例如『我们将会审核你的申诉』。</p>
                            <p class="e-font-success">正确示范：浏览不同的仓库，了解更多有价值的内容</p>
                            <p class="e-font-danger">错误示范：为了让你了解更多有价值的内容，我们提供了不同仓库供你浏览。（侧重在『我们』为用户提供了什么，而不是以用户视角的关注点为中心。）</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-4-2-3" role="tabpanel">
                            <p>省略无用词汇，不重复用户已知事实；在绝大多数交互场景下，都无需界面描述出全部的细节。</p>
                            <p>尽量提供简短、易于快速获取的内容。</p>
                            <p class="e-font-success">正确示范：保存</p>
                            <p class="e-font-danger">错误示范：保存修改内容</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-4-2-4" role="tabpanel">
                            <p>使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。</p>
                            <p>间接、暧昧模糊的说法，生僻和过于『文雅』的用词，会增加用户的认知负荷，所以应当尽量避免使用这类用户无法识别的词汇。</p>
                            <p class="e-font-success">正确示范：付款成功</p>
                            <p class="e-font-danger">错误示范：资金流出成功</p>

                        </div>
                        <div class="tab-pane" id="e-tabs-4-3-1" role="tabpanel">
                            <ul>
                                <li>描述同一个事物的词汇要保持统一;</li>
                                <li>上下文的语法、语种、语序要保持统一;</li>
                                <li>操作的名称和目标页面标题的名称保持一致。</li>
                            </ul>
                        </div>
                        <div class="tab-pane" id="e-tabs-4-4-1" role="tabpanel">
                            <p>让用户第一眼看到最重要的内容，不用到段落中寻找。</p>
                            <p>注：如考虑安全性问题时，隐私信息也可调整为『点击后可见』的方式。</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            图标 + 文字
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <p>你可以在<code>a.dropdown-item</code>内添加<code>i</code>图标</p>
                    <ul class="nav nav-pills" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#" data-target="#e-tabs-5-1-1">
                                <i class="la la-anchor"></i> 文案
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                               aria-haspopup="true" aria-expanded="false"><i class="la la-language"></i> 语言</a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" data-toggle="tab" href="#e-tabs-5-2-1">明确表述立足点</a>
                                <a class="dropdown-item" data-toggle="tab" href="#e-tabs-5-2-2">精简语句</a>
                                <a class="dropdown-item" data-toggle="tab" href="#e-tabs-5-2-3">使用用户熟悉的语言</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" data-toggle="tab" href="#e-tabs-5-2-4">表述一致</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#e-tabs-5-3-1"><i class="la la-adjust"></i> 重要的信息放在显著位置</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" data-toggle="tab" href="#e-tabs-5-4-1"><i class="la la-cc-discover"></i> Disabled 禁用</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="e-tabs-5-1-1" role="tabpanel">
                            <p>在界面中，我们需要通过对话的方式与用户产生共鸣。
                                精准、清晰的语言会更容易让用户理解，合适的语气更容易让用户建立信任感。因此在界面设计时，文案也应当被重视。
                                在使用和书写文案时有以下几点需要注意：</p>
                            <ul>
                                <li>从用户角度出发</li>
                                <li>表述一致</li>
                                <li>重要的信息放在显著位置</li>
                                <li>专业、精准、完整</li>
                                <li>精简、友好、正面</li>
                            </ul>
                        </div>
                        <div class="tab-pane" id="e-tabs-5-2-1" role="tabpanel">
                            <p>在界面中，文案是我们与用户沟通的基础，语言文字的表述也需要精心推敲，仔细设计。清晰、准确、简洁的文案设计能够让界面拥有更好的可用性，同时让用户体验更加友好。</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-5-2-2" role="tabpanel">
                            <p>在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述的立足点很重要。</p>
                            <p>既然以用户为中心，文案就应该尽量以用户为主体来写作。</p>
                            <p>注：当用户向后台反馈问题、提出建议或申诉时，使用『我们』是合理的语境，例如『我们将会审核你的申诉』。</p>
                            <p class="e-font-success">正确示范：浏览不同的仓库，了解更多有价值的内容</p>
                            <p class="e-font-danger">错误示范：为了让你了解更多有价值的内容，我们提供了不同仓库供你浏览。（侧重在『我们』为用户提供了什么，而不是以用户视角的关注点为中心。）</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-5-2-3" role="tabpanel">
                            <p>省略无用词汇，不重复用户已知事实；在绝大多数交互场景下，都无需界面描述出全部的细节。</p>
                            <p>尽量提供简短、易于快速获取的内容。</p>
                            <p class="e-font-success">正确示范：保存</p>
                            <p class="e-font-danger">错误示范：保存修改内容</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-5-2-4" role="tabpanel">
                            <p>使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。</p>
                            <p>间接、暧昧模糊的说法，生僻和过于『文雅』的用词，会增加用户的认知负荷，所以应当尽量避免使用这类用户无法识别的词汇。</p>
                            <p class="e-font-success">正确示范：付款成功</p>
                            <p class="e-font-danger">错误示范：资金流出成功</p>

                        </div>
                        <div class="tab-pane" id="e-tabs-5-3-1" role="tabpanel">
                            <ul>
                                <li>描述同一个事物的词汇要保持统一;</li>
                                <li>上下文的语法、语种、语序要保持统一;</li>
                                <li>操作的名称和目标页面标题的名称保持一致。</li>
                            </ul>
                        </div>
                        <div class="tab-pane" id="e-tabs-5-4-1" role="tabpanel">
                            <p>让用户第一眼看到最重要的内容，不用到段落中寻找。</p>
                            <p>注：如考虑安全性问题时，隐私信息也可调整为『点击后可见』的方式。</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            自适应标签页
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <p>你可以在<code>ul.nav</code>上添加<code>.nav-fill</code>设置导航区域宽度100%并平均划分每个标签宽度</p>
                    <ul class="nav nav-pills nav-tabs-btn nav-fill" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#e-tabs-6-1">标签一</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#e-tabs-6-2">标签二</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#e-tabs-6-3">标签三</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" data-toggle="tab" href="#e-tabs-6-4">标签四</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="e-tabs-6-1" role="tabpanel">
                            <p>Ant Design 将色彩体系解读成两个层面：系统级色彩体系和产品级色彩体系。</p>
                            <p>系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。
                                产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-6-2" role="tabpanel">
                            <p>Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计，该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，
                                同时也方便团队间的沟通。</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-6-3" role="tabpanel">
                            <p>Ant Design 系统级色彩体系同样源于『自然』的设计价值观。设计师通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，
                                形成了特有的 12 色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对 12 个颜色进行了衍生。
                                在中性色板的定义上，则是平衡了可读性、美感以及可用性得出的。</p>
                        </div>
                        <div class="tab-pane" id="e-tabs-6-4" role="tabpanel">
                            <p>Ant Design 的基础色板共计 120 个颜色，包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Card-->
        </div>
    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>